<script setup>
  import { computed, ref } from 'vue'
  import { getRateInfoApi, rateInfoApi } from '@/server/room'
  import { date } from '../../../uni_modules/uview-plus/libs/function/test'
  const props = defineProps(['rate', 'docId', 'orderId'])

  const formdata = ref({
    score: 0,
    content: '',
    anonymousFlag: 0,
  })

  // 是否可以点击按钮
  const isSub = computed(() => {
    return formdata.value.score > 0
  })

  // 是否匿名评价
  function onanonyFlagfn() {
    formdata.value.anonymousFlag = Math.abs(formdata.value.anonymousFlag - 1)
  }

  // 字符长度
  const textLength = computed(() => {
    return formdata.value.content.length
  })

  //评价id
  //获取评价id
  const evaluateId = ref('')
  if (props.rate.msg?.evaluateDoc?.id) {
    evaluateId.value = props.rate.msg.evaluateDoc.id
    async function getEvaluat() {
      const { data } = await getRateInfoApi(evaluateId.value)
      formdata.value = data.data
    }
    getEvaluat()
  }

  // 提交评价
  async function onRateInfoSubfn() {
    console.log(props.docId)
    console.log(props.orderId)
    const { data } = await rateInfoApi({
      ...formdata.value,
      docId: props.docId,
      orderId: props.orderId,
    })
    console.log(data)
    if (data.code !== 10000) uni.utils.toast('请求失败！')

    evaluateId.value = data.data.id
  }

  console.log(props.rate)
</script>
<template>
  <!-- 医生评价 -->
  <view class="doctor-rating">
    <view class="title">医生服务评价</view>
    <view class="subtitle">本次在线问诊服务您还满意吗？</view>
    <view class="rating">
      <uni-rate
        :size="28"
        :readonly="evaluateId !== ''"
        margin="12"
        v-model="formdata.score"
      />
    </view>
    <view v-if="evaluateId === ''" class="text">
      <uni-easyinput
        v-model="formdata.content"
        type="textarea"
        maxlength="150"
        :input-border="false"
        :styles="{ backgroundColor: '#f6f6f6' }"
        placeholder-style="font-size: 28rpx; color: #979797"
        placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
      />
      <text class="word-count">{{ textLength }}/150</text>
    </view>
    <view v-else class="text">{{ formdata.content }}</view>
    <view class="anonymous" v-if="evaluateId === ''">
      <uni-icons
        v-if="formdata.anonymousFlag === 1"
        @click="onanonyFlagfn"
        size="16"
        color="#16C2A3"
        type="checkbox-filled"
      />
      <uni-icons
        v-else
        @click="onanonyFlagfn"
        size="16"
        color="#d1d1d1"
        type="circle"
      />
      <text class="label">匿名评价</text>
    </view>
    <button
      v-if="evaluateId === ''"
      @click="onRateInfoSubfn"
      :disabled="!isSub"
      class="uni-button"
    >
      提交
    </button>
  </view>
</template>

<script>
  export default {
    options: {
      styleIsolation: 'shared',
    },
  }
</script>
<style lang="scss">
  .doctor-rating {
    padding: 30rpx 30rpx 40rpx;
    border-radius: 20rpx;
    background-color: #fff;
    margin-top: 60rpx;

    .title {
      text-align: center;
      font-size: 30rpx;
      color: #121826;
    }

    .subtitle {
      text-align: center;
      font-size: 24rpx;
      color: #6f6f6f;
      margin: 10rpx 0 20rpx;
    }

    .rating {
      display: flex;
      justify-content: center;
    }

    .text {
      padding: 20rpx 30rpx;
      margin-top: 20rpx;
      background-color: #f6f6f6;
      border-radius: 20rpx;
      position: relative;
    }

    :deep(.uni-easyinput__content-textarea) {
      font-size: 28rpx;
    }

    .word-count {
      position: absolute;
      bottom: 20rpx;
      right: 30rpx;
      line-height: 1;
      font-size: 24rpx;
      color: #6f6f6f;
    }

    .anonymous {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 30rpx 0;
      color: #6f6f6f;
      font-size: 24rpx;

      .label {
        margin-left: 6rpx;
      }
    }

    .uni-button[disabled] {
      color: #a6dbd5;
      background-color: #eaf8f6;
    }
  }
</style>
